{extend name="public/base" /}
{block name="title"}商品分类{/block}
{block name="css"}
<style type="text/css">
tbody .layui-table-cell{height:32px;line-height:32px;}
tbody .layui-table-cell img{width: auto;height: 32px}
</style>
{/block}
{block name="content"}
<div class="layui-fluid">
<div class="layui-card">

  <div class="layui-card-body">
  	<div class="layui-tab-content">
  	    <button class="layui-btn layui-btn-asuma layuiadmin-btn-admin" id="add">新建分类</button>
  	</div>
    <table id="classify" lay-filter="classify"></table>  
  </div>

</div>
</div>
{/block}
{block name="footjs"}
<script type="text/html" id="optTpl">
  <a class="layui-btn layui-btn-asuma layui-btn-xs" lay-event="edit">编辑</a>
  {{# if(d.pid == 0){}}
  <a class="layui-btn layui-btn-asuma layui-btn-xs" lay-event="second">添加二级分类</a>
  {{#}}}
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
  layui.config({
    base: '__JS__/layuiext/' //静态资源所在路径
  }).use([ 'table','form'], function(){
    var $ = layui.$
    ,form = layui.form
    ,table = layui.table;

   var tableIns =  table.render({
      elem: '#classify'
      ,url: "{:route('Shop/classList')}" //数据接口
      ,page: true //开启分页
      ,limit:10
      ,limits:[10,25,50]
      ,done:function (res, curr, count) {
        if(count <= this.limit){
          $('.layui-table-page').addClass('layui-hide');//总条数小于每页限制条数时隐藏分页
        }
      }
       ,cols: [[ //表头
      {field: 'name', title: '分类名称', templet: function(d){
        var str = '';
        switch(d.level){
          case 1: 
            str = '<span style="padding:0 5px 0 8px;">└</span>';
            break;
          case 2: 
            str = '<span style="padding:0 5px 0 25px;">└</span>';
            break;
        }
        return str+d.name;
      }}
       ,{field: 'pid', title: '级别', templet: function(d){
          var pid = ''
          switch(d.pid){
            case 0:  pid = '一级' ;break;
            default:pid = '二级' ;;break;
          }
          return pid;
        }}
      ,{field: 'main_img', title: '图片',templet: function(d){
         if(d.pid !== 0){

        return '<img src="__FILEROOT__'+d.main_img +'">'
         }else{
          return  '';
         }
          
      }}

      ,{title: '操作', toolbar: '#optTpl'}
      ]]
    });
   
    table.on('sort(classify)',function(obj){
      if(tableIns.config.page.count <= tableIns.config.page.limit){
        $('.layui-table-page').addClass('layui-hide');//总条数小于每页限制条数时隐藏分页
      }
    })

    form.on('checkbox(optstatus)', function(obj){
      var wish = obj.elem.checked
      var id = obj.value
      $.post($('#statusTpl').data('url'),{id:id, status: wish}, function(res){
        if(res.code != 1){
          layer.tips(res.result, obj.othis, {tips:1});
          obj.elem.checked = !wish;
          form.render('checkbox');
        }
      }, 'json')
    })

    $('#add').on('click', function () {
         layer.open({
          type: 2
          ,title: '添加分类'
          ,content: "{:route('Shop/classadd')}"
          ,maxmin: true
          ,area: ['35%', '60%']
          ,btn: ['确定', '取消']
          ,yes: function(index, layero){
            var submit = layero.find('iframe').contents().find("#submit");
            submit.click();
          }
        });
    });
    
    table.on('tool(classify)', function(obj){
        switch(obj.event){
          case 'edit':
              layer.open({
                type: 2
                ,title: '编辑分类'
                ,content: "{:route('classedit')}?id="+obj.data.id
                ,maxmin: true
                ,area: ['35%', '50%']
                ,btn: ['确定', '取消']
                ,success: function (layero, index) {
                   layero.find('input[name=id]').val(obj.data.id)
                }
                ,yes: function(index, layero){
                  var submit = layero.find('iframe').contents().find("#submit");
                  submit.click();
                }
              });
          break;
          case 'second':
              layer.open({
                type: 2
                ,title: "新增二级分类"
                ,content: "{:route('Shop/classSecond')}?pid="+obj.data.id
                ,maxmin: true
                ,area: ['35%', '50%']
                ,btn: ['确定', '取消']
                ,success: function (layero, index) {
                   layero.find('input[name=id]').val(obj.data.id)
                }
                ,yes: function(index, layero){
                  var submit = layero.find('iframe').contents().find("#submit");
                  submit.click();
                }
              });
          break;
          case 'del':
              layer.confirm('确定删除？？', function(index){
     
                   $.post("{:route('Shop/classDel')}", {id:obj.data.id}, function(res){
                      if(res.code == 1){
                        layer.msg('删除成功');
                        table.reload('classify'); //重载表格
                        layer.close(index); //再执行关闭 
                      }else{
                        layer.msg(res.result, {icon: 5});
                      }
                    },'json');

                }); 
          break;
        };
    });
  });
</script>
{/block}